<template>
  <!-- 页面布局 -->

  <el-container>
    <el-main style="padding: 2px 2px 0 2px; margin-left: 6rem">
      <div class="custom-calendar">
        <!-- 设置 el-calendar 的高度和宽度 -->
        <el-calendar v-model="value" />
      </div>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { ElTable, TableColumnCtx } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import { ElButton, ElDialog, dialogEmits, ElMessage } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../axios/axiosInstance";
import Cookies from "js-cookie";
import { formatNumberToCurrency } from "@/utils/formatUtils";

// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const router = useRouter();
const value = ref(new Date());
</script>
<style scoped>
/* 悬停 */
/* #f9f9fc, #fef5f0 */
.el-table {
  /* --el-table-row-hover-bg-color: rgba(0, 158, 250, 0.219) !important; */
  /* --el-table-row-hover-bg-color: #fef5f0 !important; */
  --el-table-row-hover-bg-color: rgba(254, 245, 240, 0.8) !important;
}
/* 选中 */
.el-table {
  /* --el-table-row-hover-bg-color: #fef5f0 !important; */
  --el-table-row-hover-bg-color: rgba(254, 245, 240, 0.8) !important;
}

.custom-dialog {
  position: fixed;
  top: 12%;
  left: 50%;
  width: 20%;
  /* 其他样式... */
}
.vertical-line {
  width: 1px;
  height: 100%; /* 让竖线的高度与整个页面高度一致 */
  background-color: #d3d5d7; /* 分割线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%;
  bottom: 0;
  /* left: 13%; */
  left: 19.99%;
  transform: translateX(-50%);
}
.vertical-line1 {
  width: 1px;
  height: 100%; /* 让竖线的高度与整个页面高度一致 */
  background-color: #d3d5d7; /* 分割线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%;
  bottom: 0;
  right: 20%; /* 将竖线放置在页面中间 */
  transform: translateX(-50%);
}
.vertical-line2 {
  width: 100%; /* 让横线的宽度与整个页面宽度一致 */
  height: 2px;
  background-color: #d3d5d7; /* 横线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%; /* 设置横线的垂直位置，可以根据你的布局调整 */
}
.vertical-line3 {
  width: 100%; /* 让横线的宽度与整个页面宽度一致 */
  height: 1px;
  background-color: #d3d5d7; /* 横线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 4.5%; /* 设置横线的垂直位置，可以根据你的布局调整 */
  left: 0%;
}

/* 侧边树状 */
::v-deep .el-tree-node__content {
  /* height: 45px; */
  height: 4vh;
  line-height: inherit;
}
.title {
  font-size: 18px;
}
.demo-pagination-block {
  float: right;
}
::v-deep .el-table .cell {
  padding: 0;
}
::v-deep .el-header {
  padding: 0;
}
.flex-grow {
  flex-grow: 1;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.custom-calendar {
  height: 500px; /* 设置高度 */
  width: 800px; /* 设置宽度 */
}

/* 这里可以使用更具体的选择器，以确保样式只应用于 el-calendar 中的特定元素 */
::v-deep .custom-calendar .el-calendar-table {
  /* 设置行高和列宽 */
  line-height: 5px;
}

::v-deep .el-calendar-table .el-calendar-day {
  width: 60px;
  height: 60px;
}
</style>
